<template>
    <div class="linChart" ref="chartContainer"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

const props = defineProps({
    data: {
        type: Array,
        required: true
    },
});

const chartContainer = ref(null);
let myChart = null as any;

const updateChart = () => {
    if (!chartContainer.value) return;

    // Initialize the chart
    myChart = echarts.init(chartContainer.value);

    // Define chart options
    const option = {
        grid: {
            top: '5%',//生成的echarts图片和顶部的距离
            bottom: '2%',//echarts图片和底部的距离
            left: '1%',//echarts图片和左边的距离
            right: '5%',//echarts图片和右边的间距,
            containLabel: true,//当containLabel:为ture时，以上设置生效
        },
        xAxis: {
            type: 'category',
            data: props.data.map((item: any) => item.date),
            axisTick: { show: false },
            // name: '日期',
            name: '',
            nameTextStyle: {
                color: '#FFFFFF',
                fontWeight: "normal",
                fontSize: 8,
                verticalAlign: "top",
                lineHeight: 27,
            },
            nameGap: 15,
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                }
            },
            axisLabel: {
                show: true,
                fontSize: 10,
                color: "rgba(255, 255, 255, 1)"
            },

        },
        yAxis: [{
            
            type: 'value',
            // boundaryGap: true,
            axisTick: { show: false },
            // name: '单位：%',
            name: "",
            nameTextStyle: {
                color: '#FFFFFF',
                fontSize: 10,
            },
            splitLine: {
                show: false , // 隐藏 Y 轴上的分隔线
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.1)"
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                }
            },
            axisLabel: {
                show: true,
                fontSize: 10,
                color: "rgba(255, 255, 255, 1)",
                formatter: function (value:any) {
                    if (value) {
                        return value + '%';  // 在每个刻度数字后面加上 "%"
                    } else {
                        return value
                    }
                }
            },
            max: 100
        }],
        tooltip: {
            trigger: 'axis',
            formatter: function (params: any) {
                // 自定义格式化显示的内容
                var res = '<div>' + params[0].name + '</div>';  // 时间/坐标轴名称
                params.forEach((item: any) => {
                    // 对每个数据项进行格式化显示
                    res += '<div>' + '异常任务占比：' + item.value + '%</div>';
                });
                return res;
            },
            backgroundColor: ' rgba(2,129,164,0.3)',  // 设置背景色
            borderColor: '#00E3FE',  // 设置边框颜色
            borderRadius: 4,  // 设置边框圆角
            textStyle: {
                color: '#fff',  // 设置字体颜色
                fontSize: 12  // 设置字体大小
            },
        },
        series: [{
            data: props.data.map((item: any) => item.value),
            // name: '发电量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8, // 设置数据点的大小，单位为像素
            itemStyle: {
                color: '#fff',  // 设置点的颜色
                borderColor: '#00E3FE', // 设置边框颜色
                borderWidth: 1 // 设置边框宽度
            },
            lineStyle: {
                color: '#00BBDB'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [  // 渐变颜色
                        {
                            offset: 0,
                            color: 'rgba(0, 187, 219, 0.50)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(0, 187, 219, 0.00)',
                        },
                    ],
                    global: false,
                },
            },

        }]

    };
    console.log(option);

    // Set options
    myChart.setOption(option);

    // Handle resize
    window.addEventListener('resize', () => {
        myChart.resize();
    });
};

// Watch for data changes and update the chart
watch(() => props.data, () => {
    if (myChart) {
        updateChart();
    }
}, { immediate: true });

onMounted(() => {
    updateChart();
});
</script>

<style lang="scss" scoped>
.linChart {
    width: 100%;
    height: vh(205);
    margin-top: vh(24);
}
</style>